<template>
  <div id="manAnalyzeattack"
      v-loading="registData.depthAnalisisLoading">
    <div id="left">
      <p class="analyzetitle">
        <span>{{registData.depthAnalysisEventInfo.event_name}}深度分析</span>
        <div class="box">
          <div class="modelsbox">
            <p class="minititle">事件信息</p>
            <div style="border-top: 1px solid #eee">
              <table style="width:100%"
                     class="tabletitle">
                <tr>
                  <th width="150px">事件名称</th>
                  <td width="300px" colspan="3">{{registData.depthAnalysisEventInfo.event_name}}</td>
                </tr>
                <tr>
                  <th>威胁级别</th>
                  <td>{{registData.depthAnalysisEventInfo.threaten_level}}</td>
                  <th>攻击次数</th>
                  <td>{{registData.depthAnalysisEventInfo.attack_num}}</td>
                </tr>
                <tr>
                  <th>首次攻击时间</th>
                  <td>{{registData.depthAnalysisEventInfo.start_time}}</td>
                  <th>最近攻击时间</th>
                  <td>{{registData.depthAnalysisEventInfo.new_time}}</td>
                </tr>
                <tr>
                  <th>事件描述</th>
                  <td colspan="3">{{registData.depthAnalysisEventInfo.event_desc}}</td>
                </tr>
              </table>
            </div>
          </div>
          <mh-tabs type="border-card" v-model="depthAnalusisLeftTab" id="warn-tabs">
            <mh-tab-pane name="impact" label='影响分析'>
              <div class="modelsbox">
                <p class="minititle">影响分析</p>
                <div class="tablebox">
                  <at-table :data="registData.depthAnalysisEventInfo.impactAnalysis">
                    <at-table-column label="关键要素"
                                     prop="element"></at-table-column>
                    <at-table-column label="影响机构数"
                                     prop="affect_unit"></at-table-column>
                    <at-table-column label="影响系统数"
                                     prop="affect_system"></at-table-column>
                    <at-table-column label="影响节点数"
                                     prop="affect_node"></at-table-column>
                    <at-table-column label="分析要素来源">
                      <template v-slot="scope">
                        <span v-if="scope.row.element_source==='0'">手动添加</span>
                        <span v-if="scope.row.element_source==='1'">原始信标</span>
                      </template>
                    </at-table-column>
                  </at-table>
                </div>
              </div>
              <div class="modelsbox">
                <p class="minititle">潜在影响分析</p>
                <div class="tablebox">
                  <at-table :data="registData.depthAnalysisEventInfo.potentialImpacts">
                    <at-table-column label="关键要素"
                                     prop="element"></at-table-column>
                    <at-table-column label="影响机构数"
                                     prop="affect_unit"></at-table-column>
                    <at-table-column label="影响系统数"
                                     prop="affect_system"></at-table-column>
                    <at-table-column label="影响节点数"
                                     prop="affect_node"></at-table-column>
                    <at-table-column label="分析要素来源">
                      <template v-slot="scope">
                        <span v-if="scope.row.element_source==='0'">手动添加</span>
                        <span v-if="scope.row.element_source==='1'">原始信标</span>
                      </template>
                    </at-table-column>
                  </at-table>
                </div>
              </div>
            </mh-tab-pane>
            <mh-tab-pane
              name="relatedEvents" 
              :label="`关联风险<i class='at-tabs-num'>${registData.depthAnalysisEventInfo.relatedAttacks.length+registData.depthAnalysisEventInfo.relatedRisks.length+registData.depthAnalysisEventInfo.relatedInformation.length}</i>`"
              :disabled="(registData.depthAnalysisEventInfo.relatedAttacks.length+registData.depthAnalysisEventInfo.relatedRisks.length+registData.depthAnalysisEventInfo.relatedInformation.length)===0"
            >
              <div class="modelsbox" v-if="registData.depthAnalysisEventInfo.relatedAttacks.length>0">
                <p class="minititle">相关攻击事件</p>
                <div class="tablebox">
                  <at-table :data="registData.depthAnalysisEventInfo.relatedAttacks">
                    <at-table-column label="事件名称"
                                     prop="event_name"
                                     width='220px'
                                     :show-overflow-tooltip=true>
                      <template v-slot="scope">
                        <span v-html="scope.row.event_name" style="cursor:pointer;color:#1f92ef;" @click="ctrlJump( scope.row.event_id, 'attack')"></span>
                      </template>
                    </at-table-column>
                    <at-table-column label="威胁级别"
                                     prop="threaten_level"
                                     width='120px'
                                     :show-overflow-tooltip=true></at-table-column>
                    <at-table-column label="攻击次数"
                                     prop="attack_num"
                                     width='120px'
                                     :show-overflow-tooltip=true></at-table-column>
                    <at-table-column label="描述"
                                     prop="describe"
                                     :show-overflow-tooltip=true></at-table-column>
                    <at-table-column label="关联要素"
                                     prop="associated_elements"
                                     width='220px'>
                      <template v-slot="scope">
                        <span v-html="scope.row.associated_elements"></span>
                      </template>
                    </at-table-column>
                  </at-table>
                </div>
              </div>
              <div class="modelsbox" v-if="registData.depthAnalysisEventInfo.relatedRisks.length>0">
                <p class="minititle">相关风险事项</p>
                <div class="tablebox">
                  <at-table :data="registData.depthAnalysisEventInfo.relatedRisks">
                    <at-table-column label="事项名称"
                                     prop="event_name"
                                     width='350px'
                                     :show-overflow-tooltip=true>
                      <template v-slot="scope">
                        <span v-html="scope.row.event_name" style="cursor:pointer;color:#1f92ef;" @click="ctrlJump( scope.row.risk_event_id, 'risk', scope.row.analysis_id)"></span>
                      </template>
                    </at-table-column>
                    <at-table-column label="事项等级"
                                     prop="risk_level"
                                     width='200px'
                                     :show-overflow-tooltip=true></at-table-column>
                    <at-table-column label="事项类型"
                                     prop="event_type"
                                     width='200px'
                                     :show-overflow-tooltip=true></at-table-column>
                    <at-table-column label="关联要素"
                                     prop="associated_elements">
                      <template v-slot="scope">
                        <span v-html="scope.row.associated_elements"></span>
                      </template>
                    </at-table-column>
                  </at-table>
                </div>
              </div>
              <div class="modelsbox" v-if="registData.depthAnalysisEventInfo.relatedInformation.length>0">
                <p class="minititle">相关情报信息</p>
                <div class="tablebox">
                  <at-table :data="registData.depthAnalysisEventInfo.relatedInformation">
                    <at-table-column label="情报名称"
                                     prop="intell_name"
                                     width='220px'
                                     :show-overflow-tooltip=true></at-table-column>
                    <at-table-column label="情报来源"
                                     prop="source"
                                     width='120px'
                                     :show-overflow-tooltip=true></at-table-column>
                    <at-table-column label="情报描述"
                                     prop="describe"
                                     :show-overflow-tooltip=true></at-table-column>
                    <at-table-column label="关联要素"
                                     prop="associated_elements"
                                     width='220px'>
                      <template v-slot="scope">
                        <span v-html="scope.row.associated_elements"></span>
                      </template>
                    </at-table-column>
                  </at-table>
                </div>
              </div>
            </mh-tab-pane>
          </mh-tabs>
        </div>
    </div>
    <div id="right">
      <mh-tabs type="border-card" v-model="depthAnalusisRightTab" id="warn-tabs">
        <mh-tab-pane label="事件分析" name="operation">
          <div v-if="depthAnalusisLeftTab=='impact'">
            <div class="modelsbox">
              <p class="minititle">
                影响分析
                <at-button class="addbutton" type="primary" @click="buttonAdd('impact')">添加要素</at-button>
              </p>
              <div class="tablebox">
                <div v-if="registData.depthAnalysisEventInfo.impactAnalysis.length>0">
                  <at-row class='tableboxHeader'>
                    <at-col :span="13">要素名称</at-col>
                    <at-col :span="6">关联日志</at-col>
                    <at-col :span="5">操作</at-col>
                  </at-row>
                  <at-collapse accordion>
                    <at-collapse-item :name="index" v-for="(item, index) in registData.depthAnalysisEventInfo.impactAnalysis" :key="index">
                      <template slot="title">
                        <at-row style="margin-left:20px;">
                          <at-col :span="13" :title='item.element'>{{item.element}}</at-col>
                          <at-col :span="6">{{item.log_num}}</at-col>
                          <at-col :span="5">
                            <at-popover
                              placement="top"
                              trigger="hover"
                              content="编辑">
                              <i class="saas-icon-pencil" slot="reference" @click.stop="editElement(item.element, item.element_type, 'impact')"></i>
                            </at-popover>
                            <at-popover
                              placement="top"
                              trigger="hover"
                              content="删除">
                              <i class="saas-icon-del" slot="reference" @click.stop="openDialogVisibleDel(item.element, 'impact')"></i>
                            </at-popover>
                            <at-popover
                              placement="top"
                              trigger="hover"
                              content="下发协查任务">
                              <i class="saas-icon-note-down" slot="reference" @click.stop="issuedTask(item.element_id, 'impact')"></i>
                            </at-popover>
                          </at-col>
                        </at-row>
                      </template>
                      <div v-if="item.tasks.length>0">
                        <at-row class="tableboxHeader" style="border-bottom:1px solid #eee;">
                          <at-col :span="8">任务名称</at-col>
                          <at-col :span="6">任务状态</at-col>
                          <at-col :span="5">反馈进度</at-col>
                          <at-col :span="5">操作</at-col>
                        </at-row>
                        <at-row style="padding:0 0 0 20px;height:40px;line-height:40px;border-bottom:1px solid #eee;" v-for="(task, index) in item.tasks" :key="index">
                          <at-col :span="8" :title='task.task_name'>{{task.task_name}}</at-col>
                          <at-col :span="6">{{task.task_state}}</at-col>
                          <at-col :span="5">{{task.feedback}}</at-col>
                          <at-col :span="5"><at-button type="text" style="width:0;" @click="buttonAdd('impact', 'task', task.task_id, task.element)">查看</at-button></at-col>
                        </at-row>
                        <at-row style="padding:0 0 0 20px;height:15px;"></at-row>
                      </div>
                    </at-collapse-item>
                  </at-collapse>
                </div>
                <div v-else style="text-align:center;margin-top:20px;">请添加要素</div>
              </div>
            </div>
            <div class="modelsbox">
              <p class="minititle">
                潜在影响分析
                <at-button class="addbutton" type="primary" @click="buttonAdd('potential')">添加要素</at-button>
              </p>
              <div class="tablebox">
                <div v-if="registData.depthAnalysisEventInfo.potentialImpacts.length>0">
                  <at-row class='tableboxHeader'>
                    <at-col :span="13">要素名称</at-col>
                    <at-col :span="6">关联日志</at-col>
                    <at-col :span="5">操作</at-col>
                  </at-row>
                  <at-collapse accordion>
                    <at-collapse-item :name="index" v-for="(item, index) in registData.depthAnalysisEventInfo.potentialImpacts" :key="index">
                      <template slot="title">
                        <at-row style="margin-left:20px;">
                          <at-col :span="13" :title='item.element'>{{item.element}}</at-col>
                          <at-col :span="6">{{item.log_num}}</at-col>
                          <at-col :span="5">
                            <at-popover
                              placement="top"
                              trigger="hover"
                              content="编辑">
                              <i class="saas-icon-pencil" slot="reference" @click.stop="editElement(item.element, item.element_type, 'potential')"></i>
                            </at-popover>
                            <at-popover
                              placement="top"
                              trigger="hover"
                              content="删除">
                              <i class="saas-icon-del" slot="reference" @click.stop="openDialogVisibleDel(item.element, 'potential')"></i>
                            </at-popover>
                            <at-popover
                              placement="top"
                              trigger="hover"
                              content="下发协查任务">
                              <i class="saas-icon-note-down" slot="reference" @click.stop="issuedTask(item.element_id, 'potential')"></i>
                            </at-popover>
                          </at-col>
                        </at-row>
                      </template>
                      <div v-if="item.tasks.length>0">
                        <at-row class="tableboxHeader" style="border-bottom:1px solid #eee;">
                          <at-col :span="8">任务名称</at-col>
                          <at-col :span="6">任务状态</at-col>
                          <at-col :span="5">反馈进度</at-col>
                          <at-col :span="5">操作</at-col>
                        </at-row>
                        <at-row style="padding:0 0 0 20px;height:40px;line-height:40px;border-bottom:1px solid #eee;" v-for="(task, index) in item.tasks" :key="index">
                          <at-col :span="8" :title='task.task_name'>{{task.task_name}}</at-col>
                          <at-col :span="6">{{task.task_state}}</at-col>
                          <at-col :span="5">{{task.feedback}}</at-col>
                          <at-col :span="5"><at-button type="text" style="width:0;" @click="buttonAdd('potential', 'task', task.task_id, task.element)">查看</at-button></at-col>
                          <!-- <at-col :span="8"><at-button type="text" style="width:0;"  @click="buttonAdd('task', '9916D08C0F45D69AE99B48226AAAB5C9', 'potential', item.element)">查看</at-button></at-col> -->
                        </at-row>
                        <at-row style="padding:0 0 0 20px;height:15px;"></at-row>
                      </div>
                    </at-collapse-item>
                  </at-collapse>
                </div>
                <div v-else style="text-align:center;margin-top:20px;">请添加要素</div>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="modelsbox" v-if="registData.depthAnalysisEventInfo.relatedAttacksResult.length>0">
              <p class="minititle">
                相关攻击事件
              </p>
              <div class="tablebox">
                <div v-if="registData.depthAnalysisEventInfo.relatedAttacksResult.length>0">
                  <at-row class='tableboxHeader'>
                    <at-col :span="17">关联要素</at-col>
                    <at-col :span="7">操作</at-col>
                  </at-row>
                  <at-row v-for="(item, index) in registData.depthAnalysisEventInfo.relatedAttacksResult" :key="index" style="color:#758697;line-height:30px">
                    <at-col :span="17" style="padding-left:20px;"><div>{{item.associated_elements}}</div></at-col>
                    <at-col :span="7" style="padding-left:5px;">
                      <at-popover
                        placement="top"
                        trigger="hover"
                        content="删除">
                        <i class="saas-icon-del" slot="reference" @click="openDialogVisibleDel(item.ids, 'relaDel')" style="font-size:20px;cursor:pointer;color:#1f92ef;"></i>
                      </at-popover>
                    </at-col>
                  </at-row>
                </div>
                <div v-else class="noneText">暂无数据</div>
              </div>
            </div>
            <div class="modelsbox" v-if="registData.depthAnalysisEventInfo.relatedRisksResult.length>0">
              <p class="minititle">
                相关风险事项
              </p>
              <div class="tablebox">
                <div v-if="registData.depthAnalysisEventInfo.relatedRisksResult.length>0">
                  <at-row class='tableboxHeader'>
                    <at-col :span="17">关联要素</at-col>
                    <at-col :span="7">操作</at-col>
                  </at-row>
                  <at-row v-for="(item, index) in registData.depthAnalysisEventInfo.relatedRisksResult" :key="index" style="color:#758697;line-height:30px">
                    <at-col :span="17" style="padding-left:20px;"><div>{{item.associated_elements}}</div></at-col>
                    <at-col :span="7" style="padding-left:5px;">
                      <at-popover
                        placement="top"
                        trigger="hover"
                        content="删除">
                        <i class="saas-icon-del" slot="reference" @click="openDialogVisibleDel(item.ids, 'relaDel')" style="font-size:20px;cursor:pointer;color:#1f92ef;"></i>
                      </at-popover>
                    </at-col>
                  </at-row>
                </div>
                <div v-else class="noneText">暂无数据</div>
              </div>
            </div>
          </div>
        </mh-tab-pane>
        <mh-tab-pane label="事件评估" name="conclusion">
          <!-- <div class="modelsbox">
            <p class="minititle">分析结果</p>
            <div class="tablebox">
              <div class="tabletitle">
                <at-row>
                  <at-col :span="8">影响机构</at-col>
                  <at-col :span="16"><span class="resultcount">{{registData.affectAssets.affectUnit}}</span>个</at-col>
                </at-row>
                <at-row>
                  <at-col :span="8">影响系统</at-col>
                  <at-col :span="16"><span class="resultcount">{{registData.affectAssets.affectSystem}}</span>个</at-col>
                </at-row>
                <at-row>
                  <at-col :span="8">影响节点</at-col>
                  <at-col :span="16"><span class="resultcount">{{registData.affectAssets.affectNode}}</span>个</at-col>
                </at-row>
                <at-row>
                  <at-col :span="8">相关事件</at-col>
                  <at-col :span="16"><span class="resultcount">{{registData.depthAnalysisEventInfo.relatedAttacks.length}}</span>个</at-col>
                </at-row>
                <at-row>
                  <at-col :span="8">相关情报</at-col>
                  <at-col :span="16"><span class="resultcount">{{registData.depthAnalysisEventInfo.relatedRisks.length}}</span>个</at-col>
                </at-row>
                <at-row>
                  <at-col :span="8">相关事项</at-col>
                  <at-col :span="16"><span class="resultcount">{{registData.depthAnalysisEventInfo.relatedInformation.length}}</span>个</at-col>
                </at-row>
                <at-row>
                  <at-col :span="8">关键要素</at-col>
                  <at-col :span="16">
                    <div v-for="(item, index) in registData.depthAnalysisEventInfo.impactAnalysis"
                          :key="index"
                          style="color:#20a0ff">
                      {{item.element}}
                    </div>
                  </at-col>
                </at-row>
              </div>
            </div>
          </div> -->
          <div class="modelsbox">
            <p class="minititle">分析结论填写</p>
            <div class="tablebox">
              <at-form :model="registData.analysisConclusion"
                       label-width="121px"
                       label-position="right"
                       v-if="registData.analysisConclusion.checked===0">
                <at-form-item label="是否为风险事项：">
                  <at-radio-group v-model="registData.analysisConclusion.checked" @change="analysisConclusionChange">
                    <at-radio-wall :label="1">是</at-radio-wall>
                    <at-radio-wall :label="0">否</at-radio-wall>
                  </at-radio-group>
                </at-form-item>
                <at-form-item label="上传分析依据：">
                  <at-upload class="upload-demo"
                             action="/api/analysis/depthAnalyze/addfile"
                             :on-progress='fileProgress'
                             :on-success='fileSuccess'
                             :on-error='fileError'
                             :limit="1"
                             :auto-upload="false"
                             :disabled="true"
                             :file-list="[]">
                    <at-button :disabled="true">选择文件</at-button>
                  </at-upload>
                </at-form-item>
                <at-form-item label="事项名称："
                              project="mh">
                  <at-input placeholder="请输入风险事项名称"
                            v-model="registData.analysisConclusion.eventName"
                            :disabled="true"></at-input>
                </at-form-item>
                <at-form-item label="事项类型："
                              project="mh">
                  <at-select v-model="registData.analysisConclusion.eventType"
                             plceholder="请选择"
                             :disabled="true">
                    <at-option v-for="item in typeoption"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </at-option>
                  </at-select>
                </at-form-item>
                <at-form-item label="事项等级："
                              project="mh">
                  <at-select v-model="registData.analysisConclusion.eventLevel"
                             plceholder="请选择"
                             :disabled="true">
                    <at-option v-for="item in leveloption"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </at-option>
                  </at-select>
                </at-form-item>
                <at-form-item label="事项描述：">
                  <at-input placeholder="请输入事项详细描述"
                            type="textarea"
                            v-model="registData.analysisConclusion.describe"
                            :autosize="{minRows:3,maxRows:10}"
                            :disabled="true"></at-input>
                </at-form-item>
                <at-form-item label="解决方案：">
                  <at-input placeholder="请输入解决方案"
                            type="textarea"
                            v-model="registData.analysisConclusion.solution"
                            :autosize="{minRows:3,maxRows:10}"
                            :disabled="true"></at-input>
                </at-form-item>
                <at-form-item label="备注：">
                  <at-input placeholder="请输入备注"
                            type="textarea"
                            v-model="registData.analysisConclusion.remark"
                            :autosize="{minRows:3,maxRows:10}"></at-input>
                </at-form-item>
              </at-form>
              <at-form :model="registData.analysisConclusion"
                       label-width="121px"
                       label-position="right"
                       ref="savedata"
                       :rules="formrules"
                       v-else>
                <at-form-item label="是否为风险事项：">
                  <at-radio-group v-model="registData.analysisConclusion.checked" @change="analysisConclusionChange">
                    <at-radio-wall :label="1">是</at-radio-wall>
                    <at-radio-wall :label="0">否</at-radio-wall>
                  </at-radio-group>
                </at-form-item>
                <at-form-item label="上传分析依据：">
                  <at-upload class="upload-demo"
                             action="/api/analysis/depthAnalyze/addfile"
                             :on-change='fileChange'
                             :on-progress='fileProgress'
                             :on-success='fileSuccess'
                             :on-error='fileError'
                             :limit="1"
                             :auto-upload="false"
                             ref='fileUpload'>
                    <at-button>选择文件</at-button>
                  </at-upload>
                </at-form-item>
                <at-form-item label="事项名称："
                              prop="eventName"
                              project="mh">
                  <at-input placeholder="请输入风险事项名称"
                            v-model="registData.analysisConclusion.eventName"></at-input>
                </at-form-item>
                <at-form-item label="事项类型："
                              prop="eventType"
                              project="mh">
                  <at-select v-model="registData.analysisConclusion.eventType"
                             plceholder="请选择">
                    <at-option v-for="item in typeoption"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </at-option>
                  </at-select>
                </at-form-item>
                <at-form-item label="事项等级："
                              prop="eventLevel"
                              project="mh">
                  <at-select v-model="registData.analysisConclusion.eventLevel"
                             plceholder="请选择">
                    <at-option v-for="item in leveloption"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </at-option>
                  </at-select>
                </at-form-item>
                <at-form-item label="事项描述：">
                  <at-input placeholder="请输入事项详细描述"
                            type="textarea"
                            v-model="registData.analysisConclusion.describe"
                            :autosize="{minRows:3,maxRows:10}"></at-input>
                </at-form-item>
                <at-form-item label="解决方案：">
                  <at-input placeholder="请输入解决方案"
                            type="textarea"
                            v-model="registData.analysisConclusion.solution"
                            :autosize="{minRows:3,maxRows:10}"></at-input>
                </at-form-item>
                <at-form-item label="备注：">
                  <at-input placeholder="请输入备注"
                            type="textarea"
                            v-model="registData.analysisConclusion.remark"
                            :autosize="{minRows:3,maxRows:10}"></at-input>
                </at-form-item>
              </at-form>
              <at-button @click="save" :disabled="registData.analysisConclusion.checked === ''" type="primary" style="display:block;margin:0 auto;">保存</at-button>
            </div>
          </div>
        </mh-tab-pane>
      </mh-tabs>
    </div>
    <at-dialog :title="dialogShowAddElementTitle" :visible.sync="dialogShowAddElement" :beforeClose="clear" size="large">
      <at-form :model="dialogAddFrom"
               label-width="110px"
               ref="formdata"
               :rules="addRules"
               v-if="searchShow"
               style="margin-top:0;border-bottom:1px solid #eee;">
        <at-form-item label="要素名称"
                      prop="keyword"
                      project="mh">
          <div class="dialogsearch">
            <at-input v-model="dialogAddFrom.keyword" placeholder="请输入要素名称" style="width:60%;float:left;"></at-input>
            <at-button @click="submitAddElementForm('formdata')"
                       @keyup.enter.native="submitAddElementForm('formdata')"
                       style="height:30px;position:relative;left:10px;width:30px;top:-2px;">
              <i class="saas-icon-glass"
                 style="font-size:20px;line-height: 30px;">
              </i>
            </at-button>
            <at-tooltip class="item"
                        effect="dark"
                        placement="right-start"
            >
              <div slot="content">
                <div style="margin-bottom:5px;">可将如下信息作为要素</div>
                <div style="margin-bottom:2px;">1、重要信息系统信息：系统名称、机构名称、IP、URL、域名。</div>
                <div style="margin-bottom:2px;">2、文件检测信息：文件名称 文件MD5 恶意代码名称。</div>
                <div style="margin-bottom:2px;">3、威胁检测信息：风险类型、风险等级、关键行为。</div>
              </div>
              <i class="saas-icon-cir-remind" style="font-size: 17px;color:#1f92ef;position: absolute;margin:7px 0 0 20px;"></i>
            </at-tooltip>
          </div>
        </at-form-item>
        <!-- <at-form-item label="要素类型">
          <at-select v-model="dialogAddFrom.type" plceholder="请选择类型" clearable >
            <at-option v-for="item in elementType" :key="item.value" :label="item.label" :value="item.value">
            </at-option>
          </at-select>
        </at-form-item> -->
      </at-form>
      <div style="padding-top:15px;">
        <div class='tabHeader' v-if='registData.addElementTable.showHearder'>
          <div class="btn-more" @click="changeMore">
            <span v-if='!showMore'>更多</span>
            <span v-if='showMore'>收回</span>
          </div>
          <div v-if='showMore' style='float:right;font-size:20px;line-height:30px;position:absolute;top:20px;right:3px;transform:rotate(90deg);color:#1F92EF'>
            <i class="saas-icon-backs"></i>
          </div>
          <div class="search-content">
            <at-date-picker id="datepick" v-model="dayRange" type="datetimerange" :picker-options="pickerOptions" @change="onDateRangeChange" placeholder="选择时间范围" :clearable="false" :editable="false">
            </at-date-picker>
            <at-search v-model="registData.addElementTable.search" placeholder="请输入url、恶意名称、关键行为、cve编号等" type="text" project='mh' icon="search" @keyup.enter.native="logOnSearch" :on-icon-click="logOnSearch"/>
          </div>
          <div style="clear: both;margin-bottom:15px;"></div> 
          <!-- <at-collapse-transition > -->
          <at-collapse-transition>
            <div v-if="showMore" class='moreFilter'>
              <table class="titlechoice"  style="float:left;">
                <tr>
                  <th>日志类型</th>
                  <td>
                    <div>
                      <at-select v-model="registData.addElementTable.filter.stype" multiple placeholder="请选择">
                        <at-option
                          v-for="item in registData.addElementTable.logFilterType"
                          :key="item.value"
                          :label="item.text"
                          :value="item.value">
                        </at-option>
                      </at-select>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th>所属区域</th>
                  <td>
                    <div>
                      <at-select v-model="registData.addElementTable.filter['sys_info.belong_area']" multiple placeholder="请选择">
                        <at-option
                          v-for="item in registData.addElementTable.logFilterBelongArea"
                          :key="item.value"
                          :label="item.text"
                          :value="item.value">
                        </at-option>
                      </at-select>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th>系统名称</th>
                  <td>
                    <div class='tableInput'>
                      <at-input v-model="registData.addElementTable.accurateSearch['sys_info.name']" placeholder="请输入内容"></at-input>
                    </div>
                  </td>
                </tr>
              </table>
              <table class="titlechoice" style="float:right;">
                <tr>
                  <th>严重级别</th>
                  <td>
                    <div>
                      <at-select v-model="registData.addElementTable.filter.level" multiple placeholder="请选择">
                        <at-option
                          v-for="item in registData.addElementTable.logFilterLevel"
                          :key="item.value"
                          :label="item.text"
                          :value="item.value">
                        </at-option>
                      </at-select>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th>机构名称</th>
                  <td>
                    <div class='tableInput'>
                      <at-input v-model="registData.addElementTable.accurateSearch['sys_info.unit']" placeholder="请输入内容"></at-input>
                    </div>
                  </td>
                </tr>
                <tr>
                  <th>文件MD5</th>
                  <td>
                    <div class='tableInput'>
                      <at-input v-model="registData.addElementTable.accurateSearch.md5" placeholder="请输入内容"></at-input>
                    </div>
                  </td>
                </tr>
              </table>
              <!-- <div  style="clear:both;text-align:center;padding-top:10px;">
                <at-button class="addbutton" type="primary" style="margin-left:10px;">搜索</at-button>
                <at-button class="addbutton">重置</at-button>
              </div> -->
            </div>
          </at-collapse-transition>
        </div>
        <!-- <div v-if="registData.addElementTable.total>0 || !searchShow" v-loading="registData.addElementTable.isLoading"> -->
        <div v-loading="registData.addElementTable.isLoading">
          <at-table :data="registData.addElementTable.tableData"
                    ref="addElementLogTable"
                    @selection-change="addElementSelectionChange"
                    width="100%"
                    height="300">
            <at-table-column type="selection"
                            width="50">
            </at-table-column>
            <at-table-column label="发生时间"
                             :show-overflow-tooltip="true"
                             prop="_source.ts"
                             width='120px'>
            </at-table-column>
            <at-table-column label="机构名称"
                             :show-overflow-tooltip="true"
                             prop="_source.sys_info.unit"
                             width='120px'>
              <template v-slot="scope">
                <span>{{scope.row._source.sys_info === undefined ? '未注册资产': scope.row._source.sys_info.unit === undefined ? '未注册资产' : scope.row._source.sys_info.unit}}</span>
              </template>
            </at-table-column>
            <at-table-column label="系统名称"
                             :show-overflow-tooltip="true"
                             prop="_source.sys_info.name"
                             width='120px'>
              <template v-slot="scope">
                <span>{{scope.row._source.sys_info === undefined ? '未注册资产': scope.row._source.sys_info.name === undefined ? '未注册资产' : scope.row._source.sys_info.name}}</span>
              </template>
            </at-table-column>
            <at-table-column label="严重级别"
                            :show-overflow-tooltip="true"
                            width='100px'>
              <template v-slot="scope">
                <span v-if="scope.row._source.level" :class="['level-tag',scope.row._source.level === 0?'level-tag-normal':scope.row._source.level === 1?'level-tag-low-risk':scope.row._source.level === 2?'level-tag-middle-risk':scope.row._source.level === 3?'level-tag-high-risk':'level-tag-serious']">
                    {{scope.row._source.level === undefined ? ' ': `${translateChineseLevel(scope.row._source.level)}`}}
                </span>
                <span class="level" v-else>--</span>  
              </template>
            </at-table-column>
            <at-table-column label="描述"
                            :show-overflow-tooltip="true"
                             prop="_source.describes">
            </at-table-column>
            <at-table-column label="日志类型"
                             :show-overflow-tooltip="true"
                             prop="_source.log_type_cn"
                             width='100px'>
            </at-table-column>
            <!-- <at-table-column label="来源"
                            :show-overflow-tooltip="true"
                            width='80px'>
              <template slot-scope="scope">
                <span>{{translateChinese('source', scope.row._source.stype)}}</span>
              </template>
            </at-table-column> -->
          </at-table>
          <Pagination :currentPage="registData.addElementTable.current"
                      :total="registData.addElementTable.total"
                      :pageSizes="[5, 10, 15, 20]"
                      :pageSize="registData.addElementTable.pageSize"
                      layout='total, sizes, prev, pager, next, jumper'
                      @size-change="paginationSizeChange"
                      @current-change="paginationCurrentChange"
                      style="text-align:center;margin:10px 0;clear:both"></Pagination>
          <div v-if="registData.addElementTable.total>0">
            <!-- <at-button @click="clear"
                     style="float:right;margin:10px 0 10px 20px">取消</at-button> -->
            <at-button type="primary"
                       style="float:right;margin:0 0 10px 20px"
                       @click="checkadd('part')"
                       :disabled="!(this.registData.addElementTable.addElementLogTable.length>0)">添加勾选信息</at-button>
            <at-button type="primary"
                       style="float:right;margin:0 0 10px 20px"
                       @click="checkadd('all')">添加所有信息</at-button>
          </div>
        </div>
      </div>
    </at-dialog>
    <at-dialog title="编辑要素" :visible.sync="dialogShowEditElement" :beforeClose="clear" size="large">
      <mh-tabs type="border-card" v-model="editElementTab" id="warn-tabs" @tab-click='editElementTabClick'>
        <mh-tab-pane name="all" label="关联告警日志">
          <div class='tabHeader' v-if='registData.addElementTable.showHearder'>
            <div class="btn-more" @click="changeMore">
              <span v-if='!showMore'>更多</span>
              <span v-if='showMore'>收回</span>
            </div>
            <div v-if='showMore' style='float:right;font-size:20px;line-height:30px;position:absolute;top:20px;right:3px;transform:rotate(90deg);color:#1F92EF'>
              <i class="saas-icon-backs"></i>
            </div>
            <div class="search-content">
              <at-date-picker id="datepick" v-model="dayRange" type="datetimerange" :picker-options="pickerOptions" @change="onDateRangeChange" placeholder="选择时间范围" :clearable="false" :editable="false">
              </at-date-picker>
              <at-search v-model="registData.addElementTable.search" placeholder="请输入url、恶意名称、关键行为、cve编号等" type="text" project='mh' icon="search" @keyup.enter.native="logOnSearch" :on-icon-click="logOnSearch"/>
            </div>
            <div style="clear: both;margin-bottom:15px;"></div> 
            <at-collapse-transition>
              <div v-if="showMore" class='moreFilter'>
                <table class="titlechoice"  style="float:left;">
                  <tr>
                    <th>日志类型</th>
                    <td>
                      <div>
                        <at-select v-model="registData.addElementTable.filter.stype" multiple placeholder="请选择">
                          <at-option
                            v-for="item in registData.addElementTable.logFilterType"
                            :key="item.value"
                            :label="item.text"
                            :value="item.value">
                          </at-option>
                        </at-select>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>所属区域</th>
                    <td>
                      <div>
                        <at-select v-model="registData.addElementTable.filter['sys_info.belong_area']" multiple placeholder="请选择">
                          <at-option
                            v-for="item in registData.addElementTable.logFilterBelongArea"
                            :key="item.value"
                            :label="item.text"
                            :value="item.value">
                          </at-option>
                        </at-select>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>系统名称</th>
                    <td>
                      <div class='tableInput'>
                        <at-input v-model="registData.addElementTable.accurateSearch['sys_info.name']" placeholder="请输入内容"></at-input>
                      </div>
                    </td>
                  </tr>
                </table>
                <table class="titlechoice" style="float:right;">
                  <tr>
                    <th>严重级别</th>
                    <td>
                      <div>
                        <at-select v-model="registData.addElementTable.filter.level" multiple placeholder="请选择">
                          <at-option
                            v-for="item in registData.addElementTable.logFilterLevel"
                            :key="item.value"
                            :label="item.text"
                            :value="item.value">
                          </at-option>
                        </at-select>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>机构名称</th>
                    <td>
                      <div class='tableInput'>
                        <at-input v-model="registData.addElementTable.accurateSearch['sys_info.unit']" placeholder="请输入内容"></at-input>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>文件MD5</th>
                    <td>
                      <div class='tableInput'>
                        <at-input v-model="registData.addElementTable.accurateSearch.md5" placeholder="请输入内容"></at-input>
                      </div>
                    </td>
                  </tr>
                </table>
                <!-- <div  style="clear:both;text-align:center;padding-top:10px;">
                  <at-button class="addbutton" type="primary" style="margin-left:10px;">搜索</at-button>
                  <at-button class="addbutton">重置</at-button>
                </div> -->
              </div>
            </at-collapse-transition>
          </div>
          <div v-loading="registData.addElementTable.isLoading">
            <at-table :data="registData.addElementTable.tableData"
                      ref="editElementLogTable"
                      @selection-change="addElementSelectionChange"
                      width="100%"
                      height="300">
              <at-table-column type="selection"
                               width="50"
                               :selectable="checkSelectable">
              </at-table-column>
              <at-table-column label="发生时间"
                               :show-overflow-tooltip="true"
                               prop="_source.ts"
                               width='120px'>
              </at-table-column>
              <at-table-column label="机构名称"
                               :show-overflow-tooltip="true"
                               prop="_source.sys_info.unit"
                               width='120px'>
                <template v-slot="scope">
                  <span>{{scope.row._source.sys_info === undefined ? '未注册资产': scope.row._source.sys_info.unit === undefined ? '未注册资产' : scope.row._source.sys_info.unit}}</span>
                </template>
              </at-table-column>
              <at-table-column label="系统名称"
                               :show-overflow-tooltip="true"
                               prop="_source.sys_info.name"
                               width='120px'>
                <template v-slot="scope">
                  <span>{{scope.row._source.sys_info === undefined ? '未注册资产': scope.row._source.sys_info.name === undefined ? '未注册资产' : scope.row._source.sys_info.name}}</span>
                </template>
              </at-table-column>
              <at-table-column label="严重级别"
                               :show-overflow-tooltip="true"
                               width='100px'>
                <template v-slot="scope">
                  <span v-if="scope.row._source.level" :class="['level-tag',scope.row._source.level === 0?'level-tag-normal':scope.row._source.level === 1?'level-tag-low-risk':scope.row._source.level === 2?'level-tag-middle-risk':scope.row._source.level === 3?'level-tag-high-risk':'level-tag-serious']">
                      {{scope.row._source.level === undefined ? ' ': `${translateChineseLevel(scope.row._source.level)}`}}
                  </span>
                  <span class="level" v-else>--</span>  
                </template>
              </at-table-column>
              <at-table-column label="描述"
                              :show-overflow-tooltip="true"
                               prop="_source.describes">
              </at-table-column>
              <at-table-column label="日志类型"
                               :show-overflow-tooltip="true"
                               prop="_source.log_type_cn"
                               width='100px'>
              </at-table-column>
              <at-table-column label="来源"
                              :show-overflow-tooltip="true"
                              width='80px'>
                <template slot-scope="scope">
                  <span>{{translateChinese('source', scope.row._source.stype)}}</span>
                </template>
              </at-table-column>
            </at-table>
              <Pagination :currentPage="registData.addElementTable.current"
                          :total="registData.addElementTable.total"
                          :pageSizes="[5, 10, 15, 20]"
                          :pageSize="registData.addElementTable.pageSize"
                          layout='total, sizes, prev, pager, next, jumper'
                          @size-change="paginationSizeChange"
                          @current-change="paginationCurrentChange"
                          style="text-align:center;margin:10px 0;clear:both">
              </Pagination>
            <!-- <div v-if="registData.addElementTable.total>0" > -->
            <at-button type="primary"
                       style="float:right;margin:0 0 10px 20px"
                       @click="checkadd('part')"
                       :disabled="!(this.registData.addElementTable.addElementLogTable.length>0)">添加勾选信息</at-button>
            <at-button type="primary"
                       style="float:right;margin:0 0 10px 20px"
                       @click="checkadd('all')">添加所有信息</at-button>
            <!-- </div> -->
          </div>
          <!-- <div v-else class="noneText">暂无数据</div> -->
        </mh-tab-pane>
        <mh-tab-pane name="checked" :label="`已选告警日志<i class='at-tabs-num'>${checkedLogData.total}</i>`">
          <div v-loading="checkedLogData.isLoading">
            <at-table :data="checkedLogData.data"
                      @filter-change='checkedLogFilterChange'
                      width="100%"
                      height="300">
              <at-table-column label="发生时间"
                              :show-overflow-tooltip="true"
                               prop="ts"
                               width='120px'>
              </at-table-column>
              <at-table-column label="机构名称"
                              :show-overflow-tooltip="true"
                               prop="agency_name"
                               width='120px'>
                <template v-slot="scope">
                  <!-- <span>{{(scope.row.agency_name === '-' or scope.row.agency_name === '') ? '未注册资产': scope.row.agency_name}}</span> -->
                  <span>{{scope.row.agency_name === '-' ? '未注册资产': scope.row.agency_name}}</span>
                </template>
              </at-table-column>
              <at-table-column label="系统名称"
                              :show-overflow-tooltip="true"
                               prop="sys_name"
                               width='130px'>
                <template v-slot="scope">
                  <span>{{scope.row.sys_name === '-' ? '未注册资产': scope.row.sys_name}}</span>
                </template>
              </at-table-column>
              <at-table-column label="严重级别"
                              :show-overflow-tooltip="true"
                               prop="log_level"
                               column-key="alog_level"
                               :filters="registData.addElementTable.logFilterLevel"
                               :filter-method="filterRow"
                               width='100px'>
                <template v-slot="scope">
                  <span v-if="scope.row.log_level" :class="['level-tag',scope.row.log_level === 0?'level-tag-normal':scope.row.log_level === 1?'level-tag-low-risk':scope.row.log_level === 2?'level-tag-middle-risk':scope.row.log_level === 3?'level-tag-high-risk':'level-tag-serious']">
                    {{scope.row.log_level === undefined ? ' ': `${translateChineseLevel(scope.row.log_level)}`}}
                  </span>
                  <span class="level" v-else>--</span>  
                </template>
              </at-table-column>
              <at-table-column label="描述"
                              :show-overflow-tooltip="true"
                               prop="describes">
              </at-table-column>
              <at-table-column label="日志类型"
                              :show-overflow-tooltip="true"
                               prop="log_type_cn"
                               column-key="alog_type"
                               :filters="registData.addElementTable.logFilterType"
                               :filter-method="filterRow"
                               width='120px'>
              </at-table-column>
              <at-table-column label="来源"
                              :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{translateChinese('source', scope.row.log_type)}}</span>
                </template>
              </at-table-column>
              <at-table-column label="操作" width="80">
                <template v-slot="scope">
                  <i class="saas-icon-del" @click="openDialogVisibleDel(scope.row.log_id, 'logDel', scope.row.element_id)" style="font-size:20px;cursor:pointer;color:#1f92ef;"></i>
                </template>
              </at-table-column>
            </at-table>
              <Pagination :currentPage="checkedLogData.current"
                          :total="checkedLogData.total"
                          :pageSizes="[5, 10, 15, 20]"
                          :pageSize="checkedLogData.allocation.pagination.pageSize"
                          layout='total, sizes, prev, pager, next, jumper'
                          @size-change="checkedPaginationSizeChange"
                          @current-change="checkedPaginationCurrentChange"
                          style="text-align:center;margin:10px 0;clear:both">
              </Pagination>
          </div>
          <!-- <div v-else class="noneText">暂无数据</div> -->
        </mh-tab-pane>
      </mh-tabs>
    </at-dialog>
    <at-dialog title="添加要素"
               :visible.sync="dialogAddShow">
      <div style="font-size:12px;text-align:center">
        <!-- <span v-if="checkedAll">是否确认添加当前所有共{{this.registData.addElementTable.total}}条数据？</span> -->
        <span v-if="checkedAll">是否确认添加当前所有数据？</span>
        <span v-else>是否确认添加当前已勾选共{{this.registData.addElementTable.addElementLogTable.length}}条数据？</span>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <at-button type="primary"
                   @click="confirmAddElement">确 定</at-button>
        <at-button @click="()=>{this.dialogAddShow = false}">取 消</at-button>
      </div>
    </at-dialog>
    <at-dialog title="新增任务" :visible.sync="dialogShowIssuedTask" :beforeClose="clearTask" size="large" class="taskDialog">
      <div>
        <TaskAdd :elementId='IssuedTaskElementId' @listenSuccessIssuedTask='listenSuccessIssuedTask' ref='taskChild'></TaskAdd>
      </div>
    </at-dialog>
    <at-dialog title="删除提示" :visible.sync="dialogVisibleDel" size="small">
      <span>确定删除？</span>
      <div slot="footer" class="dialog-footer">
        <at-button type="primary" @click="delSubmit">确 定</at-button>
        <at-button @click="delCancel">取 消</at-button>
      </div>
    </at-dialog>
  </div>
</template>
<script>
import MhTabs from '../../../components/tabs/tabs.vue'
import MhTabPane from '../../../components/tabs/tab-panel.vue'
import TaskAdd from '../../business/task/taskadd.vue'
import $http from '../../../utils/http.js'
import { mixin, formatDate } from '../../../models/safeEvents/utils/util'
import { Notification } from 'atelement'
import { createNamespacedHelpers, mapState } from 'vuex'
const { mapGetters, mapActions, mapMutations } = createNamespacedHelpers('analyze')

export default {
  name: 'manAnalyzeattack',
  components: {
    'mh-tabs': MhTabs,
    'mh-tab-pane': MhTabPane,
    'TaskAdd': TaskAdd
  },
  mixins: [mixin],
  data () {
    return {
      filterCtr: true,
      path: this.$route.fullPath,
      selectValue: '',
      depthAnalusisLeftTab: 'impact',
      depthAnalusisRightTab: 'operation',
      editElementTab: 'all',
      dialogShowAddElementTitle: '',
      checkedElement: '',
      IssuedTaskElementId: '',
      showMore: false, // 更多
      registData: {
        depthAnalisisLoading: false,
        affectAssets: {
          affectUnit: 0,
          affectSystem: 0,
          affectNode: 0
        },
        depthAnalysisEventInfo: {
          impactAnalysis: [], // 影响分析
          potentialImpacts: [], // 潜在影响分析
          investigationTask: [], // 协查任务
          relatedAttacks: [], // 相关攻击事件
          relatedRisks: [], // 相关风险事项
          relatedInformation: [], // 相关情报信息
          relatedAttacksResult: [], // 相关攻击事件-信标
          relatedRisksResult: [], // 相关风险事项-信标
          relatedInformationResult: [] // 相关情报信息-信标
        },
        analysisConclusion: { // 分析结论
          checked: '',
          basis: '',
          eventName: '',
          eventType: '',
          eventLevel: '',
          describe: '',
          solution: '',
          remark: ''
        },
        addElementTable: { // 添加要素表格数据
          isLoading: false,
          total: 0,
          tableData: [],
          current: 1, // 当前页码
          pageSize: 5, // 当前页显示的数据条数
          addElementLogTable: [],
          showHearder: false,
          time: `${formatDate(new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 365 * 2)))} - ${formatDate(new Date())}`,
          search: '', // 模糊搜索
          accurateSearch: { // 精确搜索
            'md5': '',
            'sys_info.unit': '',
            'sys_info.name': ''
          },
          logFilterType: [], // 日志类型
          logFilterLevel: [], // 严重级别
          logFilterBelongArea: [], // 日志来源
          filter: {
            'level': [],
            'stype': [],
            'sys_info.belong_area': []
          }
        }
      },
      addElementStep: '', // 添加要素来源步骤
      formrules: {
        eventLevel: [{ trigger: 'change', required: true, message: '请选择风险事项等级' }],
        eventType: [{ trigger: 'change', required: true, message: '请选择风险事项类型' }],
        eventName: [{ trigger: 'change', required: true, message: '请输入风险事项名称' },
          {validator: this.validateName, trigger: 'change'}]
      },
      typeoption: [
        {
          value: '流行',
          label: '流行'
        }, {
          value: '新兴',
          label: '新兴'
        }, {
          value: '高危',
          label: '高危'
        }, {
          value: '攻击类',
          label: '攻击类'
        }
      ],
      leveloption: [
        {
          value: '1',
          label: '一般'
        }, {
          value: '2',
          label: '较大'

        },
        {
          value: '3',
          label: '重大'
        },
        {
          value: '4',
          label: '特大'
        }
      ],
      dialogShowAddElement: false,
      dialogShowEditElement: false,
      dialogAddShow: false,
      dialogShowIssuedTask: false,
      searchShow: false,
      dialogVisibleDel: false,
      dialogDelPost: {
        val: '',
        type: '',
        element_id: ''
      },
      dialogAddFrom: {
        type: '',
        keyword: ''
      },
      checkedAll: false,
      addRules: {
        keyword: [{ trigger: 'blur', required: true, message: '请输入要素名称' },
          {validator: this.validateElement, trigger: 'change'}]
      },
      elementType: [{
        value: 'sip',
        label: 'ip'
      }, {
        value: 'url',
        label: 'url'
      }, {
        value: 'domain',
        label: 'domain'
      }, {
        value: 'type',
        label: 'type'
      }, {
        value: 'email',
        label: 'email'
      }],
      // 时间选择器时间区间
      dayRange: [new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 365 * 2)), new Date()],
      pickerOptions: {
        shortcuts: [
          {
            text: '过去15分钟',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 60 * 1000 * 15)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去30分钟',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 60 * 1000 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去45分钟',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 60 * 1000 * 45)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去60分钟',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 60 * 1000 * 60)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去90分钟',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 60 * 1000 * 90)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去24小时',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去7天',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去30天',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去60天',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '过去90天',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  props: {
    closetabs: { type: Function }
  },
  created () {
    this.getDepthAnalysisEventInfo({ analysisSource: this.$route.query.type, registData: this.registData, attackEventId: this.$route.query.attackEventId, analyzeId: '' })
  },
  computed: {
    ...mapGetters([
      'checkedLogData'
    ]),
    ...mapState({
      checkedLogData: state => state.analyze.checkedLogData
    })
    // 时间选择器显示的时间
    // dayRange: {
    //   get () {
    //     return this.$store.state.safeEvents.dayRange
    //   },
    //   set (value) {
    //     this.setDayange(value)
    //   }
    // }
  },
  watch: {
    editElementTab () {
      if (this.dialogShowEditElement) {
        if (this.editElementTab === 'all') {
          this.commitClearCheckedLogData()
          this.GetCheckedLog({
            analyzeId: this.registData.depthAnalysisEventInfo.analysis_id,
            element: this.dialogAddFrom.keyword,
            elementStep: this.addElementStep
          })
        }
        this.GetLogTypes({registData: this.registData})
      }
    }
  },
  mounted () {
  },
  methods: {
    ...mapActions({
      getDepthAnalysisEventInfo: 'GET_DEPTH_ANALYSIS_EVENT_INFO',
      GetPotentialAddLog: 'GET_POTENTIAL_ADD_LOG',
      PostDelElement: 'DEL_ELEMENT',
      DelRelatedOrLog: 'DEL_RELATED_OR_LOG',
      PostConfirmAddElement: 'CONFIRM_ADD_ELEMENT',
      GetCheckedLog: 'GET_CHECKED_LOG',
      GetLogTypes: 'GET_LOG_TYPES'
    }),
    ...mapMutations({
      commitClearCheckedLogData: 'COMMIT_CLEAR_CHECKED_LOG_DATA',
      setDayange: 'SET_DAYRANGE',
      setTimerange: 'SET_TIMERANGE'
    }),
    // 每页显示条数改变时所触发的事件
    paginationSizeChange (vals, type) {
      this.getTableInfo('pageSize', vals)
    },
    // 每页页数改变时所触发的事件
    paginationCurrentChange (vals, type) {
      this.getTableInfo('current', vals)
    },
    filterRow (row) {
      return true
    },
    // logFilterChange (vals, type) {
    //   if (this.filterCtr) {
    //     for (let [key, value] of Object.entries(vals)) {
    //       this.registData.addElementTable.filter[key] = value
    //     }
    //     this.GetPotentialAddLog({
    //       registData: this.registData,
    //       elementType: this.dialogAddFrom.type,
    //       element: this.dialogAddFrom.keyword
    //     })
    //   }
    // },
    checkedLogFilterChange (vals, type) {
      for (let [key, value] of Object.entries(vals)) {
        this.checkedLogData.allocation.filters[key] = value
      }
      this.GetCheckedLog({
        analyzeId: this.registData.depthAnalysisEventInfo.analysis_id,
        element: this.dialogAddFrom.keyword,
        elementStep: this.addElementStep
      })
    },
    logOnSearch () {
      this.GetPotentialAddLog({
        registData: this.registData,
        elementType: this.dialogAddFrom.type,
        element: this.dialogAddFrom.keyword,
        issearch: 'table'
      })
    },
    getTableInfo (type, vals) {
      this.registData.addElementTable[type] = vals
      if (this.dialogShowEditElement) {
        this.editElement(this.dialogAddFrom.keyword, this.dialogAddFrom.type, this.addElementStep)
      } else if (this.dialogShowAddElement) {
        this.logOnSearch()
      }
    },
    // 每页显示条数改变时所触发的事件
    checkedPaginationSizeChange (vals, type) {
      this.getCheckedTableInfo('pageSize', vals)
    },
    // 每页页数改变时所触发的事件
    checkedPaginationCurrentChange (vals, type) {
      this.getCheckedTableInfo('current', vals)
    },
    getCheckedTableInfo (type, vals) {
      this.checkedLogData.allocation.pagination[type] = vals
      this.GetCheckedLog({
        analyzeId: this.registData.depthAnalysisEventInfo.analysis_id,
        element: this.dialogAddFrom.keyword,
        elementStep: this.addElementStep
      })
    },
    fileChange (file) {
      this.registData.analysisConclusion.basis = file.name
    },
    fileError () {
      this.$notify.error('文件上传失败!')
      this.loading.close()
    },
    fileSuccess (esponse) {
      if (esponse.status === 'success') {
        // 上传成功
        this.loading.close()
      } else {
        this.loading.close()
        // 上传失败
        Notification.error({
          title: '未选择样本'
        })
      }
    },
    fileProgress (event, file, fileList) {
      this.loading = this.$loading({
        lock: true,
        text: '正在校验文件，可能需要几分钟，请稍候...'
      })
    },
    analysisConclusionChange () {
      if (this.registData.analysisConclusion.checked === 0) {
        this.registData.analysisConclusion = { // 分析结论
          checked: 0,
          eventName: '',
          eventType: '',
          eventLevel: '',
          describe: '',
          solution: '',
          remark: this.registData.analysisConclusion.remark
        }
      }
    },
    save (formName) {
      if (this.registData.analysisConclusion.checked) {
        this.$refs.savedata.validate((valid) => {
          if (valid) {
            this.postSave()
          } else {
            return false
          }
        })
      } else {
        this.postSave()
      }
    },
    postSave () {
      let postData = {
        analyzeId: this.registData.depthAnalysisEventInfo.analysis_id,
        analysisConclusion: JSON.stringify(this.registData.analysisConclusion)
      }
      $http.post('/api/analyze/depthAnalyze/postSaveAnalysis', postData).then(({ status, msg, data } = {}) => {
        if (status === 'success') {
          Notification.success('保存成功')
          if (this.registData.analysisConclusion.checked === 1) {
            this.$refs.fileUpload.submit()
          }
          setTimeout(() => {
            this.closetabs(this.path, 'remove')
          }, 500)
          this.$router.push({ path: '/monitor/analyze/analysisReport', query: { row: this.registData.depthAnalysisEventInfo.attack_event_id, analyzeId: this.registData.depthAnalysisEventInfo.analysis_id } })
        } else if (status === 'fail') {
          Notification.warning(msg)
        }
      })
    },
    buttonAdd (step, type, taskId, checkedElement) {
      this.filterCtr = true
      this.GetLogTypes({registData: this.registData})
      if (!type) {
        // 添加要素
        this.addElementStep = step
        this.searchShow = true
        this.dialogShowAddElementTitle = '添加要素'
        this.registData.addElementTable.tableData = []
      } else if (type === 'task') {
        // 查看协查任务
        this.dialogShowAddElementTitle = '添加关联日志'
        this.addElementStep = step
        this.searchShow = false
        this.dialogAddFrom.type = 'task_id'
        this.dialogAddFrom.keyword = taskId
        this.checkedElement = checkedElement
        this.GetPotentialAddLog({
          registData: this.registData,
          elementType: this.dialogAddFrom.type,
          element: this.dialogAddFrom.keyword,
          issearch: 'table'
        })
      }
      this.dialogShowAddElement = true
    },
    clear () {
      this.filterCtr = false
      if (this.$refs.editElementLogTable) {
        this.clearTableFilter('editElementLogTable')
      }
      if (this.$refs.addElementLogTable) {
        this.clearTableFilter('addElementLogTable')
      }
      this.dialogAddShow = false
      this.dialogShowAddElement = false
      this.dialogShowEditElement = false
      this.dialogAddFrom = {
        type: '',
        keyword: ''
      }
      this.registData.addElementTable = { // 添加要素表格数据
        isLoading: false,
        total: 0,
        tableData: [],
        current: 1, // 当前页码
        pageSize: 5, // 当前页显示的数据条数
        addElementLogTable: [],
        time: `${formatDate(new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 365 * 2)))} - ${formatDate(new Date())}`,
        search: '', // 模糊搜索
        accurateSearch: { // 精确搜索
          'md5': '',
          'sys_info.unit': '',
          'sys_info.name': ''
        },
        logFilterType: this.registData.addElementTable.logFilterType, // 日志类型
        logFilterLevel: this.registData.addElementTable.logFilterLevel, // 严重级别
        logFilterBelongArea: this.registData.addElementTable.logFilterBelongArea, // 日志来源
        filter: {
          'level': [],
          'stype': [],
          'sys_info.belong_area': []
        }
      }
      this.showMore = false
      this.editElementTab = 'all'
    },
    clearTask () {
      this.dialogShowIssuedTask = false
      this.$refs.taskChild.resetForm('form')
    },
    clearEditTab () {
      this.registData.addElementTable = { // 添加要素表格数据
        isLoading: false,
        total: 0,
        tableData: [],
        current: 1, // 当前页码
        pageSize: 5, // 当前页显示的数据条数
        addElementLogTable: [],
        time: `${formatDate(new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 365 * 2)))} - ${formatDate(new Date())}`,
        search: '', // 模糊搜索
        accurateSearch: { // 精确搜索
          'md5': '',
          'sys_info.unit': '',
          'sys_info.name': ''
        },
        logFilterType: this.registData.addElementTable.logFilterType, // 日志类型
        logFilterLevel: this.registData.addElementTable.logFilterLevel, // 严重级别
        logFilterBelongArea: this.registData.addElementTable.logFilterBelongArea, // 日志来源
        filter: {
          'level': [],
          'stype': [],
          'sys_info.belong_area': []
        }
      }
    },
    clearTableFilter (ref) {
      // 清除表格筛选
      let _children = this.$refs[ref].$children
      for (let i in _children) {
        if (_children[i].filterPanels) {
          let _filterPanels = _children[i].filterPanels
          for (let [key] of Object.entries(_filterPanels)) {
            _filterPanels[key].handleReset()
          }
        }
      }
    },
    // 添加要素--搜索日志
    submitAddElementForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.GetPotentialAddLog({
            registData: this.registData,
            elementType: this.dialogAddFrom.type,
            element: this.dialogAddFrom.keyword,
            issearch: 'element'
          })
        } else {
          return false
        }
      })
    },
    // 编辑要素
    editElement (element, elementType, elementStep) {
      this.filterCtr = true
      this.addElementStep = elementStep
      this.dialogShowEditElement = true
      this.GetLogTypes({registData: this.registData})
      this.GetPotentialAddLog({
        registData: this.registData,
        elementType: elementType,
        element: element,
        issearch: 'table'
      })
      this.GetCheckedLog({
        analyzeId: this.registData.depthAnalysisEventInfo.analysis_id,
        element: element,
        elementStep: elementStep
      })
      this.dialogAddFrom.type = elementType
      this.dialogAddFrom.keyword = element
    },
    addElementSelectionChange (val) {
      let elements = []
      for (let index in val) {
        elements.push(val[index])
      }
      this.registData.addElementTable.addElementLogTable = elements
    },
    checkadd (type) {
      if (type === 'part') {
        this.checkedAll = false
      } else if (type === 'all') {
        this.checkedAll = true
      }
      this.dialogAddShow = true
    },
    openDialogVisibleDel (val, type, elementId = '') {
      this.dialogVisibleDel = true
      this.dialogDelPost = {
        val: val,
        type: type,
        element_id: elementId
      }
    },
    delSubmit () {
      this.dialogVisibleDel = false
      this.delElement(this.dialogDelPost.val, this.dialogDelPost.type, this.dialogDelPost.element_id)
    },
    delCancel () {
      this.dialogVisibleDel = false
    },
    delElement (element, elementStep, elementId) {
      if (elementStep === 'impact' || elementStep === 'potential') {
        this.PostDelElement({
          registData: this.registData,
          analyzeId: this.registData.depthAnalysisEventInfo.analysis_id,
          element: element,
          elementStep: elementStep
        })
      } else if (elementStep === 'relaDel') {
        this.DelRelatedOrLog({
          registData: this.registData,
          id: element,
          elementId: '0',
          analyzeId: this.registData.depthAnalysisEventInfo.analysis_id
        })
      } else if (elementStep === 'logDel') {
        this.DelRelatedOrLog({
          registData: this.registData,
          id: element,
          elementId: elementId,
          analyzeId: this.registData.depthAnalysisEventInfo.analysis_id,
          element: this.dialogAddFrom.keyword,
          elementStep: this.addElementStep
        })
      }
    },
    confirmAddElement () {
      let logs = ''
      if (!this.checkedAll) {
        logs = JSON.stringify(this.registData.addElementTable.addElementLogTable)
      }
      this.PostConfirmAddElement({
        registData: this.registData,
        analyzeId: this.registData.depthAnalysisEventInfo.analysis_id,
        type: this.dialogAddFrom.type,
        keyword: this.dialogAddFrom.keyword,
        elementStep: this.addElementStep, // 影响与潜在影响
        checkedAll: this.checkedAll, // 是否勾选全部
        logs: logs,
        checkedElement: this.checkedElement
      })
      this.dialogAddShow = false
      this.clear()
      this.toggleSelection()
      if (this.dialogShowAddElementTitle === '添加要素' || this.dialogShowAddElementTitle === '添加关联日志') {
        this.dialogShowAddElement = false
      }
    },
    toggleSelection () {
      if (this.$refs.editElementLogTable) {
        this.$refs.editElementLogTable.clearSelection()
      }
    },
    validateElement (rule, value, callback) {
      let analysisDatas = [{
        'type': 'impact',
        'data': this.registData.depthAnalysisEventInfo.impactAnalysis
      }, {
        'type': 'potential',
        'data': this.registData.depthAnalysisEventInfo.potentialImpacts
      }]
      let isExist = '1'
      let msg = ''
      for (let analysisIndex in analysisDatas) {
        let analysis = analysisDatas[analysisIndex]
        for (let index in analysis['data']) {
          if (value.replace(/(^\s*)|(\s*$)/g, '') === analysis['data'][index]['element'].replace(/(^\s*)|(\s*$)/g, '')) {
            isExist = '0'
            if (analysis.type === 'impact') {
              msg = '该要素已在影响分析中存在'
            } else if (analysis.type === 'potential') {
              msg = '该要素已在潜在影响分析中存在'
            }
            if (this.addElementStep === analysis.type) {
              msg = '该要素已存在'
            }
            continue
          }
        }
      }
      if (isExist === '1') {
        callback()
      } else {
        callback(new Error(msg))
      }
    },
    validateName (rule, value, callback) {
      $http.post('/api/analyze/depthAnalyze/validataEventname', { riskeventname: value }).then(
        ({ status, data, msg } = {}) => {
          if (status === 'success') {
            if (data.total > 0) {
              callback(new Error('该风险事项名称已存在'))
            } else {
              callback()
            }
          }
        }
      )
    },
    translateChineseLevel (level) {
      switch (level) {
        case 1:
          return '低危'
        case 2:
          return '中危'
        case 3:
          return '高危'
        case 4:
          return '严重'
      }
    },
    checkSelectable (row) {
      if (this.checkedLogData.log_ids.indexOf(row._source.id) >= 0) {
        return false
      } else {
        return true
      }
    },
    issuedTask (elementId, elementStep) {
      this.IssuedTaskElementId = elementId
      this.dialogShowIssuedTask = true
    },
    listenSuccessIssuedTask () {
      this.dialogShowIssuedTask = false
      this.getDepthAnalysisEventInfo({ analysisSource: this.$route.query.type, registData: this.registData, attackEventId: this.$route.query.attackEventId, analyzeId: '' })
    },
    onDateRangeChange (value) {
      this.registData.addElementTable.time = value
    },
    changeMore () {
      this.showMore = !this.showMore
      this.registData.addElementTable.accurateSearch = { // 精确搜索
        'md5': '',
        'sys_info.unit': '',
        'sys_info.name': ''
      }
      this.registData.addElementTable.filter = {
        'level': [],
        'stype': [],
        'sys_info.belong_area': []
      }
    },
    editElementTabClick () {
      // if (this.editElementTab === 'all') {
      //   this.commitClearCheckedLogData()
      //   this.GetCheckedLog({
      //     analyzeId: this.registData.depthAnalysisEventInfo.analysis_id,
      //     element: this.dialogAddFrom.keyword,
      //     elementStep: this.addElementStep
      //   })
      // } else {
      //   this.clearEditTab()
      //   this.GetPotentialAddLog({
      //     registData: this.registData,
      //     elementType: this.dialogAddFrom.type,
      //     element: this.dialogAddFrom.keyword,
      //     issearch: 'table'
      //   })
      // }
      // this.GetLogTypes({registData: this.registData})
    },
    ctrlJump (id, type, analysisId = 0) {
      if (type === 'attack') {
        this.$router.push({ 'name': '事件管理详情', 'query': { row: id } })
      } else if (type === 'risk') {
        this.$router.push({ 'name': '风险事项详情', 'query': { eventid: id, analysisid: analysisId, type: 'riskevent' }
        })
      }
    }
  }
}
</script>
<style lang='less'>
.at-popover {
  background: #25333E !important;
  border-radius: 2px !important;
  min-width: 50px !important;
  line-height: 30px;
  text-align: center;
  padding: 0 15px;
  color: #fff;
  .popper__arrow:after {
    border-color: #25333E white white white !important;
  }
}
.at-select-dropdown {
  margin: 1px!important;
}
#manAnalyzeattack {
  position: relative;
  width: 100%;
  min-height: 876px;
  .at-form-item__error {
    float: left;
  }
  .at-tabs-num {
    height: 20px;
  }
  .noneText {
    margin-top:20px;
    text-align:center;
  }
  .at-tabs--border-card>.at-tabs__content {
    padding-top: 15px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0 !important;
  }
  #left {
    width: 70%;
    background-color: #fff;
    float: left;
    .analyzetitle {
      margin: 0;
      border-bottom: 1px solid #eee;
      color: #5c6781;
      font-size: 14px;
      padding: 15px 20px;
      font-weight: 900;
      word-wrap: break-word;
    }
    .box {
      padding: 20px;
      .at-tabs__nav {
        margin-right: 5px;
        .is-disabled {
          cursor: no-drop;
        }
      }
      .at-tabs__content {
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
      }
    }
  }
  #right {
    margin-left: 71%;
    padding-top: 20px;
    background-color: #fff;
    .at-tabs__nav-scroll{
      padding-left: 20px;
      padding-right: 20px;
      height: 35px;
      .at-tabs__nav{
        margin-right: 5px;
        .at-tabs__item {
          background-color: #ffffff;
          border-top:1px solid #ffffff;
          border-left:1px solid #ffffff;
          border-right:1px solid #ffffff;
          border-bottom:1px solid #eeeeee;
          min-width: 120px;
          height: 35px;
          line-height: 35px;
          .is-disabled {
            cursor: no-drop;
          }
        }
        .is-active {
          border-top:1px solid #eeeeee;
          border-left:1px solid #eeeeee;
          border-right:1px solid #eeeeee;
          border-bottom:1px solid #ffffff;
          color:#1f92ef;
          font-weight: bolder;
        }
      }
    }
    /deep/ .at-tabs__content {
      padding: 20px;
      .analyze-statistical-container{
        display: grid;
        width:100%;
        grid-template-columns:2fr 1fr 1fr;
        grid-template-rows: 150px;
        grid-gap: 20px;
        .analyze-statistical-box{
          border: 1px solid #eeeeee;
          .statistics-content{
            width:100%;
            height: 90px;
            display: flex;
            .statistics-analyze-info{
              width:80%;
              display: flex;
              flex-direction: column;
              .statistics-total{
                width: 100%;
                height: 36px;
                line-height: 36px;
                margin: 20px 0 13px;
                font-size: 36px;
                font-weight: 700;
                padding: 0 20px;
                color: #1f92ef;
              }
              .statistics-info{
                width: 100%;
                height: 12px;
                line-height: 12px;
                margin-bottom: 15px;
                padding: 0 20px;
                .statistics-title{
                  display: inline-block;
                  color: #5c6781;
                  font-weight: 700;
                  margin-right: 40px;      
                }
                .statistics-text{
                  display: inline-block;
                  span{
                    display: inline-block;
                    height: 12px;
                    line-height: 12px;
                    color:#5c6781;
                  }
                  .mg-rt6{
                    margin-right: 6px;
                  }  
                }
              }
            }
            .statistics-chart-hint{
              width:20%;
              padding-top: 30px;
              .chart-hint-item{
                width: 100%;
                height: 12px;
                line-height: 12px;
                margin-bottom: 6px;
                .chart-hint-icon-total{
                  display: inline-block;
                  width: 10px;
                  height: 10px;
                  border: 1px solid #1f92ef;
                  background-color: #e8f4fd;
                  border-radius: 50%;
                }
                .chart-hint-icon-analyzed{
                  display: inline-block;
                  width: 10px;
                  height: 10px;
                  border: 1px solid #1f92ef;
                  background-color: #1f92ef;
                  border-radius: 50%;
                }
                .chart-hint-text{
                  display: inline-block;
                }
              }
            }
          }
          .chart-main{
            width:100%;
            height: 60px;
          }
          .statistics-pie-title{
            width: 100%;
            height: 12px;
            line-height: 12px;
            padding: 0 20px;
            margin:20px 0;
            font-size: 12px;
            font-weight: 700;
            color: #5c6781;
          }
          .anlyze-pie-chart{
            width: 100%;
            height: 93px;
          }
        }
      }
    }
    .at-tabs--border-card>.at-tabs__content {
      padding: 20px 20px;
    }
  }
  .modelsbox {
    border: 1px solid #eee;
    margin-bottom: 20px;
    margin-left: 15px;
    margin-right: 15px;
    .tablebox_panel {
      .minititle {
        font-size: 13px;
        border: 1px solid #eee;
        border-bottom: 0;
        margin-top: 10px;
      }
    }
    .minititle {
      font-weight: 900;
      font-size: 14px;
      color: #5c6781;
      padding-left: 20px;
      height: 50px;
      margin: 0;
      line-height: 50px;
      .addbutton {
        float: right;
        margin-top: 10px;
        font-weight: 500;
        margin-right: 20px;
      }
    }
    .tablebox {
      padding: 0 20px 20px 20px;
      border-top: 1px solid #eee;
      .at-table {
        cursor: auto;
        .at-table__body-wrapper {
          overflow: auto;
        }
      }
      .tableboxHeader{
        height: 50px;
        line-height: 50px;
        font-size: 12px;
        color: #5c6781;
        padding-left: 20px;
        font-weight: 900;
      }
      .at-collapse {
        width: 100%;
        border: 1px solid #eeeeee;
        min-height: 0;
        .is-active {
          border-bottom: 1px solid #dfe6ec;
          .at-collapse-item__header {
            background-color: #f1f4f7;
          }
        }
        .at-collapse-item {
          .at-collapse-item__header {
            &:hover{
              background-color: #f1f4f7;
            }
          }
          .at-collapse-item__wrap {
            background-color: #fff;
            padding: 0 20px;
          }
        }
        .item__header_wall {
          width: 100%;
          padding: 0;
          .collapse-item-more {
            display: none;
          }
          .header_wall_img {
            display: none;
          }
          .at-col {
            i {
              font-size: 20px;
              color: #1f92ef;
              vertical-align: sub;
            }
          }
        }
      }
      .at-row {
        .at-col {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .at-upload__input {
        display: none !important;
      }
      .at-upload-list--text {
        position: relative;
      }
      .at-upload-list__item-name {
        display: inline-block;
        max-width: 220px;
        overflow: hidden;
        margin-left: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .at-upload-list__item-status-label {
        float: left;
      }
      .at-checkbox-group {
        margin-top: 20px;
      }
    }
    .tabletitle {
      tr {
        height: 40px;
        td {
          text-align: left;
          .at-button + .at-button {
            margin-left: 0px;
          }
        }
        th {
          text-align: right;
          padding-right: 40px;
          color: #5c6781;
          font-weight: 500;
        }
      }
      .at-row {
        line-height: 40px;
        padding: 0 20px;
      }
      .resultcount {
        color: #1f92ef;
        font-weight: 900;
      }
    }
  }
  .at-dialog-box {
    .btn-more {
      color: #1F92EF;
      cursor: pointer;
      float: right;
      padding: 8px 0 0 6px;
      font-size: 13px;
      &:hover {
        color: #3781f4;
        text-decoration: underline;
      }
    }
    .at-tabs__nav {
      margin-right: 5px;
      .is-disabled {
        cursor: no-drop;
      }
    }
    .at-form-item__content {
      text-align: left;
      .at-input {
        width: 100%;
      }
    }
    .at-dialog {
      .level-tag{
        width:50px;
        height: 22px;
        line-height: 20px;
        border-radius: 2px;
        display: inline-block;
        text-align: center;
        background-color: #ffffff;
      }
      .level-tag-normal {
          color:#52cb7b;
          border:1px solid #52cb7b;
      }
      .level-tag-low-risk {
          color:#FFC833;
          border:1px solid #FFC833;
      }
      .level-tag-middle-risk {
          color:#FF9933;
          border:1px solid #FF9933;
      }
      .level-tag-high-risk{
          color:#FF6633;
          border:1px solid #FF6633;
      }
      .level-tag-serious{
          color:#FF3333;
          border:1px solid #FF3333;
      }
      .at-dialog__body {
        max-height: 650px;
        overflow-y: auto;
        .at-form-item{
          margin-right: 0;
          margin-top: 0; 
        }
      }
      .at-dialog__headerbtn {
        height: 37px;
      }
      .at-form-item:last-child {
        border-top: none;
        padding-top: 0;
      }
      .tabHeader {
        min-height: 40px;
        margin: 0;
        padding: 0;
        position: relative;
        .search-content{
          .at-date-editor--datetimerange.at-input{
            float: left;
            width: 410px;
          }
          .at-date-editor .at-date-input, .at-date-editor .at-input__inner{
            width: 410px;
          }
          .at-search {
            float: right;
            width: 399px;
            .at-input__inner-mh {
              width: 345px;
            }
            .mh .at-input__icon {
              left: 370px;
              top: -1px;
            }
          }
        }
        .at-tabs--border-card > .at-tabs__content {
          padding-left: 0!important;
          padding-bottom: 0!important;
          padding-right: 0!important;
        }
        .moreFilter{
          padding: 0 20px 0 0;
          width: 100%;
          .titlechoice {
            font-size: 12px;
            border: 1px solid #eee;
            margin: 0;
            height: 24px;
            width: 410px;
            tr {
              border-bottom: 0;
              th {
                font-weight: 400;
                color: #5c6781;
                background-color: #f8f8f8;
                text-align: right;
                height: 36px;
                width: 100px;
                text-align: center;
                border-bottom: 1px solid #eee;
              }
              td {
                padding: 0;
                border-bottom: 1px solid #eee;
                .at-select .at-input__inner {
                  border: 0;
                  &:hover {
                    border: 1px solid #1f92ef;
                  }
                }
                .tableInput {
                  width: 100%;
                  .at-input {
                    width: 100%;
                    .at-input__inner {
                      height: 36px;
                      border: 0;
                      &:hover {
                        border: 1px solid #1f92ef;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .taskDialog {
    .at-dialog--large {
      width: 600px;
    }
    .at-dialog__body {
      padding: 0;
    }
  }
}
</style>
